<div class="file-version-container">

  <div class="left">
    <nz-card [nzBordered]="false" nzTitle="考核类型">
      <div class="form-wrap">
        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm1">
          <nz-form-item>
            <nz-form-label>年份</nz-form-label>
            <nz-form-control>
              <nz-select [ngModel]="'1'" formControlName="year" nzAllowClear nzPlaceHolder="年份"
                         style="width: 170px;">
                <nz-option nzLabel="2020" nzValue="2020"></nz-option>
                <nz-option nzLabel="2019" nzValue="2019"></nz-option>
                <nz-option nzLabel="2018" nzValue="2018"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>关键词</nz-form-label>
            <nz-form-control>
              <input formControlName="name" nz-input placeholder="关键词"/>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control>
              <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
              <button nz-button (click)="onAdd()" style="margin-left: 10px">新增</button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>

      <div class="table-wrap">
        <nz-table #expandTable
                  nzSize="small"
                  [nzData]="treeData"
                  [nzShowPagination]="false">
          <thead>
          <tr>
            <th nzWidth="35%">考核类型</th>
            <th nzWidth="10%">分值</th>
            <th nzWidth="10%">排序</th>
            <th>备注</th>
            <th nzWidth="10%">操作</th>
          </tr>
          </thead>
          <tbody>
          <ng-container *ngFor="let data of expandTable.data">
            <ng-container *ngFor="let item of treeExpandedData[data.key]">
              <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
                <td
                  [nzIndentSize]="item.level * 20"
                  [nzShowExpand]="!!item.children"
                  [(nzExpand)]="item.expand"
                  (nzExpandChange)="collapse(treeExpandedData[data.key], item, $event)"
                >
                  {{ item.name }}
                </td>
                <td>{{ item.score }}</td>
                <td>{{ item.sq }}</td>
                <td>{{ item.remark }}</td>
                <td>
                  <i nz-icon nzType="edit" nzTheme="outline" (click)="openEditModal(item)"></i>
                  <a class="delete" nz-popconfirm nzPopconfirmTitle="确认删除？" nzPopconfirmPlacement="left"
                     (nzOnConfirm)="onDelete(item.id)">
                    <i nz-icon nzType="delete" nzTheme="outline"></i>
                  </a>
                </td>
              </tr>
            </ng-container>
          </ng-container>
          </tbody>
        </nz-table>
      </div>
    </nz-card>
  </div>

  <div class="right">
    <nz-card [nzBordered]="false" nzTitle="考核指标">
      <div class="form-wrap">
        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm2">
          <nz-form-item>
            <nz-form-label>关键词</nz-form-label>
            <nz-form-control>
              <input formControlName="name" nz-input placeholder="关键词"/>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control>
              <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
              <button nz-button (click)="onAdd2()" style="margin-left: 10px">新增</button>
              <button
                nz-button
                nzType="default"
                [disabled]="delDisable"
                nz-popconfirm
                nzPopconfirmTitle="确认删除勾选吗？"
                (nzOnConfirm)="onDeleteAll2()" style="margin-left: 10px">删除</button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>

      <div class="table-wrap">
        <nz-table
          #rowSelectionTable
          nzSize="middle"
          nzShowPagination
          nzShowSizeChanger
          nzBordered
          [nzData]="rightTableData"
          (nzCurrentPageDataChange)="currentPageDataChange($event)">
          <thead>
          <tr>
            <th
              nzWidth="62px"
              nzShowCheckbox
              [(nzChecked)]="allChecked"
              [nzIndeterminate]="indeterminate"
              (nzCheckedChange)="checkAll($event)"
            ></th>
            <th>考核类型</th>
            <th>考核指标</th>
            <th>考核指标分值</th>
            <th>排序</th>
            <th>评分标准</th>
            <th nzWidth="25%">备注</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of rowSelectionTable.data">
            <td nzShowCheckbox
                [(nzChecked)]="rightTableCheckedId[data.id]"
                (nzCheckedChange)="refreshStatus()">
            </td>
            <td>{{ data.a }}</td>
            <td>{{ data.b }}</td>
            <td>{{ data.c }}</td>
            <td>{{ data.d }}</td>
            <td>{{ data.e }}</td>
            <td>{{ data.f }}</td>
            <td>
              <a (click)="openEditModal2(data)">修改</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a nz-popconfirm nzPopconfirmTitle="确认删除？" nzPopconfirmPlacement="left"
                 (nzOnConfirm)="onDelete2(data.id)">
                删除
              </a>
            </td>
          </tr>
          </tbody>
        </nz-table>
      </div>
    </nz-card>
  </div>

  <nz-modal nzClassName="custom-modal" nzWidth="600" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
            (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
    <form nz-form [formGroup]="form">
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">考核类型名称</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="name" placeholder="考核类型名称">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">分值</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="score" placeholder="分值">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">排序</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="sq" placeholder="分值">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">备注</nz-form-label>
            <nz-form-control>
              <textarea formControlName="remark" nz-input rows="4" style="width: 300px"></textarea>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </nz-modal>

  <nz-modal nzClassName="custom-modal" nzWidth="660" [(nzVisible)]="modal2Show" [nzTitle]="modal2Title"
            (nzOnCancel)="onCancel2()" (nzOnOk)="onConfirm2()">
    <form nz-form [formGroup]="form2">
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">考核类型</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="a" placeholder="考核类型">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">考核指标</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="b" placeholder="考核指标">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">指标分数</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="c" placeholder="指标分数">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">排序</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="d" placeholder="排序">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="3" [nzXs]="24">评分标准</nz-form-label>
            <nz-form-control>
              <textarea formControlName="e" nz-input rows="4" style="width: 500px"></textarea>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="3" [nzXs]="24">备注</nz-form-label>
            <nz-form-control>
              <textarea formControlName="f" nz-input rows="4" style="width: 500px"></textarea>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </nz-modal>
</div>
